import React, { Component } from "react"
import { Icon, Popover } from 'antd'
import 'styles/financial-account/Tree-Card.scss'
import AnswerSvg from 'images/financial-management/answer.svg'

class OpenCloseHook extends Component {

  state = {
    useChildNodes: true
  };

  openOrClose = () => {
    const { useChildNodes } = this.state, { onChange } = this.props;
    this.setState({ useChildNodes: !useChildNodes }, () => {
      onChange(this.state.useChildNodes);
    });
  };

  render() {
    const { childNodes = [] } = this.props;
    const { useChildNodes } = this.state;
    return (<span>
      {childNodes.length > 0 ? <Icon type={useChildNodes ? 'minus' : 'plus'} onClick={this.openOrClose}/>: null }
    </span>)
  }

}

class TreeCard extends Component {

  render () {
    const { data, onChange, display } = this.props;
    return (
      <div className={'tree-card'} style={{height: data.max * 200 + 'px'}}>
        <div className={'card-block'}>
          <div className={'card'} id={`card-${data.id}`}>
            <div className={'card-header'}>
              <img src={AnswerSvg}/>
              result
              <OpenCloseHook childNodes={data.childNodes} onChange={useChildNodes => onChange(data.id, useChildNodes)}/>
            </div>
            <div className={'card-content'}>
              <Popover content={'Name'} placement='topLeft'>
                Name
              </Popover>
            </div>
          </div>
        </div>
        {
          this.props.children.length > 0 && (
            <div style={{ visibility: display ? 'hidden' : null }}>
              {this.props.children}
            </div>
          )
        }
      </div>
    )
  }

}

export default TreeCard
